<template>
	<wsPage title="数据字典">
		<div slot="page_operate">
			<Button type="ghost"><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>
		
		<wsSmPanel>
			<div slot="list_operate">
				<Button type="primary" @click="showAddModal">新增字典</Button>
				<Button type="ghost">刷新缓存</Button>
				<Button type="ghost" v-if="!isPLevel" @click="preList">上一层</Button>
				<Button type="ghost" v-if="!isPLevel" @click="topList">顶层</Button>
			</div>
			<div slot="list_data">
				<Table :columns="table.columns" :data="table.datas"></Table>
			</div>
		</wsSmPanel>
		
		<!--新增弹框-->
		<wsModal v-model="modal1.show" ok-text="保存" title="新增字典项" @on-ok="saveModal1" @on-cancel="cancelModal1">
		    <Form ref="modal1" :model="modal1.model" :rules="modal1.rules" :label-width="100">
		        <FormItem label="键" prop="wKey">
		            <Input v-model="modal1.model.wKey" placeholder="请输入键"></Input>
		        </FormItem>
		        <FormItem label="显示名称" prop="displayName">
		            <Input v-model="modal1.model.displayName" placeholder=""></Input>
		        </FormItem>	
		        <FormItem label="排序号" prop="listIndex">
		        	<InputNumber :max="100" :min="1" v-model="modal1.model.listIndex"></InputNumber>
		        </FormItem>	
		        <FormItem label="值" prop="wValue">
		            <Input type="textarea" v-model="modal1.model.wValue" placeholder=""></Input>
		        </FormItem>			        
		    </Form>			
		</wsModal>		
	</wsPage>
</template>

<script>
	import Util from '../../../common/util.js';
	export default {
		data() {
			return {
				table: {
					columns: [
					{
						title: '键',
						key: 'wKey',
						render: (h, params) => {
							return h('a', {
								on: {
									click: () => {
										let rowId_ = params.row.id_;
										this.listChilds(rowId_);
									}
								}
							}, params.row.wKey);
						}
					},
					{
						title: '显示名称',
						key: 'displayName'
					},
					{
						title: '排序号',
						key: 'listIndex'
					},
					{
						title: '路径',
						key: 'path'
					},
					{
						title: '操作',
						align: 'center',
						render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    on: {
                                    	click: () => {
                                    	}
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    on: {
                                    	click: () => {
                                    		let row_ = params.row;
                                    		this.delConfirm(row_);
                                    	}
                                    }
                                }, '删除')
                            ]);
                        }
					}],
					datas: []
				},
				form: {
					curParentId: '-1', //当前的父节点
					paths: [] //显示层级路径
				},
				//新增弹框
				modal1: {
					show: false,
					model: {
						id: '',
						wKey: '',
						displayName: '',
						listIndex: 1,
						wValue: ''
					},
					rules: {
						wKey: [
							{ required: true, message: '请输入键内容'}
						]
					}
				}
			}
		},
		computed: {
			/**
			 * 是否为顶级
			 */
			isPLevel() {
				return '-1' === this.form.curParentId;
			},
			/**
			 * 当前的modal1是否为编辑状态
			 */
		    isEdit() {
		      return !Util.vad.isBlank(this.modal1.model.id);
		    }			
		},
		mounted() {
			this.init();
		},
		methods: {
			/**
			 * 初始化
			 */
			init() {
				const _this = this;
				let parentId_ = this.form.curParentId;
				this.axios.get('/ws/sys/datadicts/' + parentId_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.table.datas = res.data;
					} else {
						
					}
				});
			},
			/**
			 * 查看子节点
			 */
			listChilds(rowId_) {
				let curParentId_ = this.form.curParentId;
				this.form.paths.push(curParentId_);
				this.form.curParentId = rowId_;
				this.init();
			},
			/**
			 * 上一层
			 */
			preList() {
				let preParentId_ = this.form.paths.pop();
				this.form.curParentId = preParentId_;
				this.init();
			},
			/**
			 * 顶层
			 */
			topList() {
				this.form.curParentId = '-1';
				this.form.paths = [];
				this.init();
			},
			/**
			 * 显示新增弹框
			 */
			showAddModal() {
				this.modal1.show = true;
			},
			/**
			 * 保存弹框1内容
			 */
			saveModal1() {
				this.$refs['modal1'].validate((valid) => {
                    if (valid) {
                        this.submitModal1();
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                });			
			},
			/**
			 * 提交表单
			 */
			submitModal1() {
				if(this.isEdit) {
					this.editDataDict();
				} else {
					this.saveDataDict();
				}
			},
			/**
			 * 保存数据字典
			 */
			saveDataDict() {
				let postData_ = this.modal1.model;
				const _this = this;
				this.axios.post('/ws/sys/datadict', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.init();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('创建数据字典项失败:' + message_);
					}
				});
			},
			/**
			 * 编辑数据字典
			 */
			editDataDict() {

			},
			/**
			 * 取消弹框1
			 */
			cancelModal1() {
				this.$refs['modal1'].resetFields();
				this.modal1.show = false;
			},
			/**
			 * 删除提示
			 */
			delConfirm(row_) {
				const _this = this;
				this.$confirm({
        			title: '操作提示',
        			width: 300,
        			content: '你确认删除本行记录吗?',
        			onOk: function() {
        				_this.delDatadictRow(row_);
        			}
        		});				
			},
			/**
			 * 删除数据字典项目
			 */
		    delDatadictRow(rowItem_) { //删除行
		      let datadictId = rowItem_.id;
		      let rsv_ = rowItem_.rsv_;
		      const _this = this;
		      this.axios.delete('/ws/sys/datadict/' + datadictId + '/' + rsv_).then(function(response) {
		      		let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.warning('删除记录成功');
						_this.init();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('删除数据字典记录项失败:' + message_);
					}
		      });
		    }			
		}
	}
</script>

<style>

</style>